<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '新增问题',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>
<template>
  <view class="w-[100vw] h-[100vh] box-border contentBox">
    <wd-form ref="form" :model="model">
      <wd-cell-group custom-class="group" border>
        <wd-input
          label="提交人"
          label-width="100px"
          disabled
          v-model="model.nickName"
          placeholder="暂无数据"
        />
        <wd-datetime-picker
          label="发现日期"
          clearable
          type="date"
          placeholder="请选择发现日期"
          :rules="[{ required: true, message: '请选择发现日期' }]"
          v-model="model.date"
        />
        <wd-input
          label="区域"
          :rules="[{ required: true, message: '请输入区域' }]"
          placeholder="请输入区域"
          label-width="100px"
          prop="tmpDesc"
          clearable
          v-model="model.tmpDesc"
        />
        <wd-select-picker
          label="问题类型"
          v-model="model.examineUser"
          :columns="userList"
          label-width="100px"
          placeholder="请选择问题类型"
          :rules="[{ required: true, message: '请选择问题类型' }]"
          prop="examineUser"
          type="radio"
          clearable
        ></wd-select-picker>
        <wd-input
          label="问题描述"
          :rules="[{ required: true, message: '请输入问题描述' }]"
          placeholder="请输入问题描述"
          label-width="100px"
          prop="tmpDesc"
          clearable
          v-model="model.tmpDesc"
        />
        <wd-input
          label="措施描述"
          :rules="[{ required: true, message: '请输入措施描述' }]"
          placeholder="请输入措施描述"
          label-width="100px"
          prop="tmpDesc"
          clearable
          v-model="model.tmpDesc"
        />
        <wd-select-picker
          label="责任人"
          v-model="model.resideUserId"
          :columns="userList"
          label-width="100px"
          prop="resideUserId"
          placeholder="请选择责任人"
          type="radio"
          :rules="[{ required: true, message: '请选择责任人' }]"
          clearable
          filterable
        ></wd-select-picker>
        <view class="flexBox">
          <view class="w-[100px] mr-[15px] pl-[1px]">
            <text class="text-[red] text-[16px] mr-[10upx]">*</text>
            问题图片
          </view>
          <view>
            <wd-upload
              v-model:file-list="model.fileList"
              :size-type="['compressed']"
              :rules="[{ required: true, message: '请选择问题图片' }]"
              reupload
              :limit="1"
              :action="action"
            ></wd-upload>
            <view class="text-[red] text-[12px]" v-if="!imgCode">请选择问题图片</view>
          </view>
        </view>
      </wd-cell-group>
    </wd-form>
    <view class="bottomBox">
      <wd-button plain @click="goBack">取消</wd-button>
      <wd-button @click="submitData">确认</wd-button>
    </view>
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { useSysStore } from '@/store/systemInfo'
import { userSearch } from '@/api/staff/registration'
import { watch } from 'vue'
defineOptions({
  name: 'AddProblem',
})

const sysStore = useSysStore()
const model = ref({
  fileList: [],
})
const imgCode = ref(true)
const scrollTop = ref(0)
const userInfo = ref({})
const action = ref('')
const form = ref(null)
const userList = ref([])

const submit = () => {}

watch(
  () => model.value.fileList,
  (newVal) => {
    if (newVal.length == 0) {
      imgCode.value = false
    } else {
      imgCode.value = true
    }
  },
)

onLoad(() => {})
onMounted(() => {
  userInfo.value = { ...sysStore.userInfo }
  model.value.nickName = userInfo.value.nickName
  getUserList()
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

const goBack = () => {
  uni.navigateBack()
}

// 点击提交
const submitData = () => {
  form.value.validate().then(async (data) => {
    if (!model.value.fileList || model.value.fileList?.length == 0) {
      imgCode.value = false
    }
    if (data.valid && model.value.fileList && model.value.fileList?.length > 0) {
    }
  })
}

// 获取用户信息
const getUserList = async () => {
  const res = await userSearch()
  userList.value = res.data.data.map((item) => {
    return {
      label: item.dictLabel,
      value: item.dictValue,
    }
  })
  console.log(res, '获取用户信息')
}

// 初始化
</script>

<style lang="scss" scoped>
:deep() {
  .wd-input__inner {
    color: black !important;
  }
}
.flexBox {
  display: flex;
  padding: 10px;
  padding-left: 14px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
}
.contentBox {
  background-color: #f1f1f1;
  padding: 30upx;
  .bottomBox {
    height: 180upx;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30px;
    box-sizing: border-box;
  }
}
</style>
